﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>

</head>
<style>
    
    .V_card_view {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0;
        clear: both;
    }

        .V_card_view li {
            background: #fff;
            padding: 0;
            margin: 0 10px 15px;
            list-style: none;
            flex-basis: calc(25% - 20px);
            list-style: none;
            border: 1px solid #ddd;
        }

            .V_card_view li a {
                color: #464646;
                display: block;
                margin: 15px;
            }

    .V_card_view_top {
        display: flex;
        justify-content: flex-end;
    }

        .V_card_view_top p {
            font-size: 14px;
            margin: 0;
            font-weight: bold;
        }

        .V_card_view_top span {
            color: #eb8c00;
            font-size: 16px;
            font-weight: bold;
        }

    .V_card_view_main {
        margin: 0 0 5px 0;
        /*min-height: 40px !important ;*/
        font-size: 16px;
        font-weight: bold;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        height: 22px;
        color: #EB8C00;
    }

    .V_card_view_main_foot {
        font-size: 12px;
        display: flex;
        flex-flow: column;
        margin-bottom: 40px;
    }

        .V_card_view_main_foot p {
            margin: 0;
            display: flex;
        }

            .V_card_view_main_foot p span {
                display: block;
            }

    .V_card_view_foot {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        font-weight: bold;
    }

        .V_card_view_foot p span {
            font-size: 12px;
            font-weight: bold;
        }

        .V_card_view_foot p i {
            font-style: normal;
        }


    .MerterialPage {
        min-height: 100px;
        padding-top: 10px;
    }

    .Checked-In {
        color: #175C2C;
    }

    .Checked-Out {
        color: #E0301E;
    }

    .MerterialPage-select {
        display: flex;
        align-items: center;
        margin: 10px 0 10px 10px;
        float: right;
    }

        .MerterialPage-select p {
            margin: 0 10px 0 0;
        }

        .MerterialPage-select select {
            height: 33px;
            margin-left: 10px;
            margin-right: 10px;
            padding: 0 5px;
        }

        .MerterialPage-select div {
            display: flex;
            align-items: center;
        }

    @media (max-width: 768px) {
        .V_card_view li {
            flex-basis: 100%;
            margin: 0 10px 10px;
        }

        .V_card_view {
            flex-flow: column;
        }

        .V_card_view_main_foot {
            margin-bottom: 20px;
        }

        .V_card_view_foot {
            flex-flow: column;
        }

            .V_card_view_foot p {
                margin: 0;
            }

        .MerterialPage-select {
            flex-flow: column;
            width: 100%;
            margin: 0 10px;
            float: inherit;
        }

            .MerterialPage-select div {
                margin: 5px 0;
                width: 100%;
            }

            .MerterialPage-select select {
                width: calc(100% - 80px);
                margin: 0 0 0 10px;
            }

            .MerterialPage-select p {
                width: calc(50% - 15.5px);
            }

                .MerterialPage-select p:last-child {
                    margin: 0;
                }
    }
    .nodatas{min-height:410px;padding:30px;text-align:center;font-size:16px;color:#888;
             background-color:#fff;
    }
</style>

<body style="overflow-y:scroll;margin-bottom:20px;background-color:#fff;">
    <!-- <div class="loadingoverlay" style="background-color: rgba(255, 255, 255, 0.99); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; background-image: url(&quot;&quot;); background-position: center center; background-repeat: no-repeat; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-size: 100px;"></div> -->
    <div id="materialDiv" style="border-top:1px solid #eee;">
        <div v-show="documentList.length==0" class="nodatas">
            No documents.
        </div>
        <div v-show="documentList.length>0">
            <div>
                <div class="MerterialPage">
                    <div class="MerterialPage-select" v-show="busy!='busy'">
                        <div>
                            <span>Sort by:</span>
                            <select v-model="sortItem" v-on:change="sortData('')">
                                <option v-for="o in sortItemList">{{o}}</option>
                            </select>
                        </div>
                        <div>
                            <p class="btn btn-default" v-bind:class="{'btn-danger':sortType=='Ascending'}" v-on:click="sortData('Ascending')">Ascending</p>
                            <p class="btn btn-default" v-bind:class="{'btn-danger':sortType=='Descending'}" v-on:click="sortData('Descending')">Descending</p>
                        </div>
                    </div>
                    <ul class='V_card_view'>
                        <li v-for="o in documentList">
                            <a v-bind:href="o.url" target="_blank">
                                <div class="V_card_view_top">
                                    <p>Version No:{{o.versionno}}</p>
                                </div>
                                <div class="V_card_view_main">{{o.title}}</div>
                                <div class="V_card_view_main_foot">
                                    <p><span>Owner:</span>{{o.owner}}</p>
                                    <p><span>Uploaded Time:</span>{{o.time}}</p>
                                </div>
                                <div class="V_card_view_foot">
                                    <p>CheckIn/CheckOut:<span v-bind:class="{'Checked-In':o.checkStatus=='Checked In','Checked-Out':o.checkStatus=='Checked Out'}">{{o.checkStatus}}</span></p>
                                    <p>Status:<i>{{o.status}}</i></p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="text-align:center;margin-bottom:15px;" v-show="busy=='nobusy'">
                <button class="btn btn-danger" v-on:click="PaggingData()">show more</button>
            </div>
            <div style="text-align:center;padding:15px;border:1px solid #ddd;background-color:#eee;" v-show="busy=='busy'">
                Data is loading...
            </div>
        </div>
    </div>

    <script src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=b21a8457-24f9-452f-bfae-c94df0c31f59"></script>
    <script src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=d2e0953a-a507-4b0a-8fc3-9fddc4e4c03b"></script>
    <script>
        var requrl = getAppHomeUrl() + "/CustomApi/RetrieveQueryDocs";

        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return '';
        };
    </script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#materialDiv',
            filters: {
                filter1: function(value) {
                    var v = (value / 1.0).toFixed(1);
                    return v;
                }
            },
            data: {
                documentList: [],
                pageIndex: 1,
                busy: "nobusy",
                sortItem: "Title",
                sortType:"Ascending",
                sortItemList:["Title","CreateBy","CheckStatus","Document Status","Modify Date"]
            },
            computed: {
                ProcessedProjectList: function() {

                }
            },
            methods: {
                sortData: function (type) {
                    console.log("type", type);
                    console.log("sortItem", this.sortItem);
                    console.log("sortType", this.sortType);
                    if (this.sortType == type) return;
                    else if (type != '') this.sortType = type;

                    this.pageIndex = 1;
                    this.documentList = [];
                    this.busy = "nobusy";
                    this.PaggingData();
                },

                PaggingData: function() {
                    if (this.busy == "end" || this.busy == "busy") return;

                    this.busy = "busy";
                    var Jsondata = {};
                    Jsondata.SearchItem = [];
                    Jsondata.EntityName = "q10z7uxi3ad";
                    Jsondata.index = (vm.$data.pageIndex - 1) * 10;
                    Jsondata.size = 10;
                    Jsondata.Columns = ["_id", "Title", "C4-CreateBy", "VersionNum", "CheckStatus", "C4-WorkflowStateDisplayName", "C4-ModifyDate"];
                    Jsondata.Order = {
                        "C4-WorkflowStateDisplayName": "Descending"
                    };
                    var sortItem = this.sortItem;
                    if (sortItem == "CreateBy") sortItem = "C4-CreateBy";
                    else if (sortItem == "Document Status") sortItem = "C4-WorkflowStateDisplayName";
                    else if (sortItem == "Modify Date") sortItem = "C4-ModifyDate";
                    Jsondata.Order = {
                        [sortItem]: this.sortType
                    };
                    var dataid = getUrlParam("dataid");
                    var itemName = "ProductCode";
                    var modular = getUrlParam("modular");
                    if (modular == 2) itemName = "ProjectCode";
                    else if (modular == 3) itemName = "EngagementCode";
                    Jsondata.SearchItem = [{
                        Method: "And",
                        Operator: "Equal",
                        Name: itemName,
                        Value: dataid
                    }, {
                        Method: "And",
                        Operator: "NotEqual",
                        Name: "C4-WorkflowStateDisplayName",
                        Value: "Expired"
                    }, {
                        Method: "And",
                        Operator: "NotEqual",
                        Name: "C4-WorkflowStateDisplayName",
                        Value: "Deleted"
                    }];
                    $.ajax({
                        url: requrl,
                        type: 'POST',
                        data: Jsondata,
                        async: true,
                        success: function(response) {
                            if (response.StatusCode === 200) {
                                vm.$data.busy = "nobusy";
                                vm.$data.total = response.Data.total;
                                if (response.Data.rows.length < Jsondata.size ||
                                    response.Data.total == 0) vm.$data.busy = "end";

                                if (response.Data.total > 0) {
                                    var htmlStr = "";
                                    $.each(response.Data.rows, function(i, o) {
                                        var title = length > 50 ? o.Title.substr(0, 50) : o.Title;
                                        var time = moment(o["C4-ModifyDate"]).format("MM/DD/YYYY HH:mm");
                                        var url = getAppHomeUrl() + "/vForm/Document/Preview/" + o._id;
                                        vm.$data.documentList.push({
                                            title: title,
                                            time: time,
                                            url: url,
                                            status: o["C4-WorkflowStateDisplayName"],
                                            checkStatus: o.CheckStatus,
                                            owner: o["C4-CreateBy"],
                                            versionno: o.VersionNum
                                        });
                                    });

                                }
                                $("vm.$data.documentList", vm.$data.documentList);
                            }
                            vm.$data.pageIndex += 1;
                            $(".loadingoverlay").hide();
                        }
                    });
                }
            }
        });

        function init() {
            vm.PaggingData();
        }
        $(function() {
            init()
        });
    </script>
</body>

</html>